<template>
  <lay-card>
    <template v-slot:title>
      <lay-row space="20">
        <lay-col md="20">
<!--          <lay-button size="sm" @click="updateData">更新数据</lay-button>-->
          <lay-button size="sm" type="normal" @click="insertData">插入数据</lay-button>
          <lay-button size="sm" type="blue" @click="downLoadData">下载SQL</lay-button>
        </lay-col>
      </lay-row>
    </template>
    <template v-slot:body>
      <div v-if="loadFlag">
          <lay-row space="10" v-for="item in tables.list">
            <lay-col md="24">
              <lay-table
                :height="'300px'"
                :columns="item.columns"
                :loading="loading"
                :default-toolbar="true"
                :data-source="item.data_source"
                v-model:selected-keys="selectedKeys"
                resize="true"
                autoColsWidth="true"
              >
                <template v-slot:toolbar>
                  <h3>表：[{{item.database + "." + item.table}}]</h3>
                </template>
                <template v-slot:operator="{ row }">
                  <lay-button size="xs" type="primary" @click="editData">编辑</lay-button>
                </template>
              </lay-table>
            </lay-col>
          </lay-row>
      </div>
    </template>
  </lay-card>
</template>

<script lang="ts">
export default {
  name: "ReviewData"
}
</script>

<script lang="ts" setup>

import {h, onBeforeMount, reactive, ref} from "vue";
import {downLoadSqlData, insertDataApi, reviewDataAPi, updateDataApi} from "../../../api/module/scene";
import {useRoute} from "vue-router";
import {notify, openMsg} from "../../../untils/tip";
import {layer} from "@layui/layui-vue";
import EditRowData from "./EditRowData.vue";

const route = useRoute();
const tables: any = reactive({data: {execute_id: ''},
  list: [{database: '', table: '', columns: [], dataSource: []}]
});


/** 组件入参 **/
const {executeId} = defineProps({
    executeId: {type: Number, default: 0},
});

/** 定义一个变量来接收父组件传来的方法 **/
const emit = defineEmits(["insertData"]);

/** 页面初始化执行的方法 **/
onBeforeMount(() => {
    tables.data.execute_id = executeId;
    console.log('Review data page : ', tables.data)
    getReviewData()
})

const loadFlag = ref(false);


const page = reactive({ current: 1, limit: 10, total: 0 });
const selectedKeys = ref([]);

const loading = ref(false);


const getReviewData = async () => {
  let {result, status, message} = await reviewDataAPi({execute_id: tables.data.execute_id});
  if(status === 'success'){
    tables.list = result;
    loadFlag.value = true;
  }
  notify(status, message);
};

const msg_id = ref();

const editData = (rowData: any) => {
  msg_id.value = layer.open({
      type: "page",
      title: "编辑数据",
      area: ['35%','32%'],
      content: h(EditRowData, {
        rowData: rowData.sql_id,
        setData: function (res: any){
          rowData = res;
        },
        cancelEdit: function (){
          layer.close(msg_id.value)
        }
      })
  })
};

const updateData = async () => {
  let {result, status, message} = await updateDataApi({params: tables});
  notify(status, message);
}

const downLoadData = async () => {
  const filename = String(executeId) + ".sql";
  try {
    const response = await downLoadSqlData({execute_id: executeId});
    const url = window.URL.createObjectURL(new Blob([response]));
    const link = document.createElement('a');
    link.href = url;

    link.setAttribute('download', filename); // 'file.pdf' 是你想要保存的文件名，可以根据实际情况修改
    document.body.appendChild(link);
    link.click();
    notify('success', filename + '文件下载成功！')
  } catch (error) {
    console.error(error);
    notify('failed', filename + '文件下载失败！')
  }
}

const insertData = async () => {
    emit('insertData');
}
</script>

<style scoped>

</style>